require(['config'], () => {
    require(['jquery', 'artTemplate', 'cookie', 'include'], function ($, template) {
        class CartPage {
            constructor() {
              this.cart = []
              $.cookie.json = true // 自动转换 cookie 值
      
              this.loadCart()
              this.render()
              this.bindEventListener()
            }
      
            /**
             * 加载本地保存的购物车数组
             */
            loadCart() {
              this.cart = $.cookie('cart') || []
              console.log(this.cart)
            }
      
            /**
             * 渲染购物车商品的布局
             */
            render() {
               
              // 购物车中行的商品数据
              const html = template('cart-template', {cart: this.cart})
              $('.cart-body').html(html)
              // 合计金额
              const total = this.cart.reduce((result, item) => {
                if (item.checked) {
                  result += item.price * item.amount
                }
                return result
              }, 0)
              $('.total-container .total').html('￥'+total)
              // 将 cookie 中保存的值与当前操作完的购物车数组保持同步
              $.cookie('cart', this.cart, {expires: 10})
              // 全选 框的选中状态
              if($('.content-left input:checked').length === this.cart.length){
                $('.check-icon').attr('checked', 'checked')
              }
            }
      
            // 从购物车中移除商品
            removeFromCart(e) {
              // // DOM 操作的删除
              // console.log($(e.target).parents('.cart_topnav'))
              // console.log($(e.target).parent().parent())
              // $(e.target).parents('.cart_topnav').remove()
      
              // 通过删除数组元素来实现删除
              const id = $(e.target).parents('.cart_topnav').data('id')
              this.cart = this.cart.filter(item => item.id !== id)
              this.render()
      
              // 重新保存 cookie
              // TODO...
            }
      
            // 修改购物车中商品数量
            modifyAmount(e) {
      
              // 修改数据，重新渲染
            //   const src = $(e.target)
            //   const id = src.parents('.cart_topnav').data('id')
            //   this.cart.forEach(item => {
            //     if (item.id === id) {
            //       if (src.is('.plus')) { // 加数量
            //         item.amount += 1
            //       } else if (src.is('.minus')) { // 减数量
            //         if (item.amount <= 1) {
            //           return
            //         }
            //         item.amount -= 1
            //       } else if (src.is('.amount')) { // 文本框
            //         // 获取文本框中输入的值
            //         const _amount = src.val()
            //         if (!/^\+?[1-9][0-9]*$/.test(_amount)) {
            //           console.log('数量格式有误')
            //         } else {
            //           item.amount = Number(_amount)
            //         }
            //       }
            //     }
            //   })
            //   this.render()
      
              // 保存 cookie
              // TODO...
            }
      
            // 处理全选
            handleCheckAll(e) {
              // 获取全选复选框的选中状态
              const checked = $(e.target).prop('checked')
              // 设置所有购物车商品选中状态与“全选”框状态一致
              this.cart.forEach(item => item.checked = checked)
              // 重新渲染
              this.render()
            }
      
            // 商品行前复选框处理
            handleCheckParts(e) {
              // 修改当前行数据的选中状态
              const id = $(e.target).parents('.cart_topnav').data('id')
              this.cart.forEach(item => {
                if (item.id === id) {
                  item.checked = $(e.target).prop('checked')
                }
              })
      
              this.render()
      
              // // 获取商品行前复选框选中时的总个数
              // const len = $('.check_prod:checked').length
              // // 设置“全选”复选框的选中状态
              // $('.check_all').prop('checked', len === this.cart.length)
              // if (len === this.cart.length) {
              //   $('.check_all').prop('checked', true)
              // } else {
              //   $('.check_all').prop('checked', false)
              // }
            }
      
            // 反选
            handleCheckOper() {
              this.cart.forEach(item => {
                item.checked = !item.checked
              })
              this.render()
              // $('.check_all').prop('checked', $('.check_prod:checked').length === this.cart.length)
            }
      
            // 删除选中
            handleRemoveChecked() {
              // 获取选中项，遍历每一个，获取所在行中商品id，在数组中进行过滤
              $('.content-left input:checked').each((index, dom) => {
                const id = $(dom).parents('.content-left').data('id')
                this.cart = this.cart.filter(item => item.id != id)
                console.log(id)
              })
              // 重新渲染
              this.render()
            }
      
            // 清空购物车
            // handleClear() {
            //   this.cart = []
            //   this.render()
            // }
      
            /**
             * 注册事件监听
             */
            bindEventListener() {
              // 删除
            //   $('.term-content').on('click', this.removeFromCart.bind(this))
      
              // 数量修改
            //   $('.cart-body').on('click', '.minus, .plus', this.modifyAmount.bind(this))
            //   $('.cart-body').on('blur', '.amount', this.modifyAmount.bind(this))
      
              // 全选
              $('.check_all').on('change', this.handleCheckAll.bind(this))
      
              // 商品行前的选中
            //   $('.content-left input').on('change',  this.handleCheckParts.bind(this))
      
              // 反选
            //   $('.check_oper').on('click', this.handleCheckOper.bind(this))
      
              // 删除选中
              $('.remove_checked').on('click', this.handleRemoveChecked.bind(this))
      
              // 清空购物车
            //   $('.clear_cart').on('click', this.handleClear.bind(this))
            }
          }
      
          new CartPage()
    })
})